@import (reference) "@/styles/variables.less";

.analytics-page {
  .analytics-page__header {
    padding-bottom: @spacing-xl;
  border-bottom: 1px solid @gray-200;

    .analytics-page__title {
      font-size: @font-size-3xl;
  font-weight: 700;
  color: @gray-900;
    }

    .analytics-page__description {
      color: @gray-600;
  margin-top: @spacing-sm;
    }
  }

  .analytics-page__content {
    & > * + * {
    margin-top: @spacing-2xl;
  }

    .analytics-page__welcome-card {
      .card();
  padding: @spacing-3xl;
  text-align: center;
  transition: all @transition-slow;

      &:hover {
        transform: scale(1.02);
  box-shadow: @shadow-lg;
      }

      .analytics-page__welcome-icon {
        width: 64px;
  height: 64px;
  color: @gray-400;
  margin: 0 auto @spacing-xl auto;
      }

      .analytics-page__welcome-title {
        font-size: @font-size-xl;
  font-weight: 600;
  color: @gray-900;
  margin-bottom: @spacing-lg;
      }

      .analytics-page__welcome-text {
        color: @gray-600;
      }
    }

    .analytics-page__grid {
      display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: @spacing-xl;
  
  @media (min-width: @screen-lg) {
    grid-template-columns: repeat(2, 1fr);
  }
  
  @media (min-width: @screen-xl) {
    grid-template-columns: repeat(3, 1fr);
  }
    }

    .analytics-page__metric-card {
      .card();
  padding: @spacing-xl;
  text-align: center;
  transition: all @transition-normal;

      &:hover {
        transform: scale(1.05);
  box-shadow: @shadow-lg;
      }

      .analytics-page__metric-icon {
        width: 48px;
  height: 48px;
  margin: 0 auto @spacing-lg auto;
      }

      .analytics-page__metric-value {
        font-size: @font-size-3xl;
  font-weight: 700;
  margin-bottom: @spacing-sm;
      }

      .analytics-page__metric-label {
        font-size: @font-size-sm;
  color: @gray-600;
      }

      .analytics-page__metric-trend {
        font-size: @font-size-xs;
  margin-top: @spacing-xs;
      }

      &.analytics-page__metric-card--primary {
        .analytics-page__metric-value {
          color: @blue-600;
        }

        .analytics-page__metric-icon {
          color: @blue-500;
        }
      }

      &.analytics-page__metric-card--success {
        .analytics-page__metric-value {
          color: @green-600;
        }

        .analytics-page__metric-icon {
          color: @green-500;
        }
      }

      &.analytics-page__metric-card--warning {
        .analytics-page__metric-value {
          color: @yellow-600;
        }

        .analytics-page__metric-icon {
          color: @yellow-500;
        }
      }

      &.analytics-page__metric-card--danger {
        .analytics-page__metric-value {
          color: @red-600;
        }

        .analytics-page__metric-icon {
          color: @red-500;
        }
      }
    }

    .analytics-page__chart-section {
      @media (min-width: @screen-lg) {
    grid-column: span 2;
  }

      .analytics-page__chart-header {
        display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: @spacing-xl;

        .analytics-page__chart-title {
          font-size: @font-size-lg;
  font-weight: 600;
  color: @gray-900;
        }

        .analytics-page__chart-actions {
          display: flex;
  align-items: center;
  gap: @spacing-md;
        }
      }

      .analytics-page__chart-container {
        .card();
  padding: @spacing-lg;
      }
    }

    .analytics-page__list-section {
      .card();
  padding: @spacing-lg;

      .analytics-page__list-header {
        display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: @spacing-lg;

        .analytics-page__list-title {
          font-size: @font-size-lg;
  font-weight: 600;
  color: @gray-900;
        }
      }

      .analytics-page__list-items {
        & > * + * {
    margin-top: @spacing-md;
  }
      }

      .analytics-page__list-item {
        display: flex;
  align-items: center;
  justify-content: space-between;
  padding: @spacing-md;
  background: @gray-50;
  border-radius: @border-radius-lg;
  transition: color @transition-normal;

        &:hover {
          background: @gray-100;
        }

        .analytics-page__list-item-info {
          display: flex;
  align-items: center;
  gap: @spacing-md;

          .analytics-page__list-item-icon {
            width: 32px;
  height: 32px;
  color: @blue-500;
          }

          .analytics-page__list-item-text {
            flex: 1;

            .analytics-page__list-item-title {
              font-weight: 500;
  color: @gray-900;
            }

            .analytics-page__list-item-subtitle {
              font-size: @font-size-sm;
  color: @gray-600;
            }
          }
        }

        .analytics-page__list-item-value {
          font-size: @font-size-sm;
  font-weight: 500;
  color: @gray-900;
        }
      }
    }
  }

  .analytics-page__filter-section {
    .card();
  padding: @spacing-lg;
  margin-bottom: @spacing-xl;

    .analytics-page__filter-header {
      display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: @spacing-lg;

      .analytics-page__filter-title {
        font-size: @font-size-lg;
  font-weight: 600;
  color: @gray-900;
      }
    }

    .analytics-page__filter-controls {
      display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: @spacing-lg;
  
  @media (min-width: @screen-md) {
    grid-template-columns: repeat(2, 1fr);
  }
  
  @media (min-width: @screen-lg) {
    grid-template-columns: repeat(4, 1fr);
  }
    }

    .analytics-page__filter-group {
      & > * + * {
    margin-top: @spacing-sm;
  }

      .analytics-page__filter-label {
        display: block;
  font-size: @font-size-sm;
  font-weight: 500;
  color: @gray-700;
      }

      .analytics-page__filter-select {
        width: 100%;
  padding: @spacing-sm;
  border: 1px solid @gray-300;
  border-radius: @border-radius-lg;
  
  &:focus {
    outline: none;
    border-color: @blue-500;
    box-shadow: 0 0 0 2px fade(@blue-500, 20%);
  }
      }
    }
  }

  // 响应式设计
  @media (max-width: @screen-md) {
    .analytics-page__content {
      .analytics-page__grid {
        grid-template-columns: repeat(1, 1fr);
      }

      .analytics-page__filter-section {
        .analytics-page__filter-controls {
          grid-template-columns: repeat(1, 1fr);
        }
      }
    }
  }

  @media (max-width: @screen-sm) {
    .analytics-page__header {
      text-align: center;
    }

    .analytics-page__content {
      .analytics-page__chart-section {
        .analytics-page__chart-header {
          display: flex;
  flex-direction: column;
  align-items: flex-start;
  & > * + * {
    margin-top: @spacing-md;
  }

          .analytics-page__chart-actions {
            width: 100%;
  justify-content: center;
          }
        }
      }

      .analytics-page__list-section {
        .analytics-page__list-header {
          display: flex;
  flex-direction: column;
  align-items: flex-start;
  & > * + * {
    margin-top: @spacing-md;
  }
        }
      }
    }
  }
}